<template>
  <div class="dialog_content">
    <el-dialog
      class="m_dialog"
      title="隐患新增"
      :visible.sync="dialogVisible"
      width="800"
      append-to-body
      :before-close="cancel"
      :close-on-click-modal="false"
    >
      <div class="content">
        <div class="content-box">
          <div class="box-heard">
            <CustomTitle title="隐患派发"></CustomTitle>
          </div>
          <div class="box-body" style="min-height: 317px">
            <custom-form
              ref="distributedForm"
              :formModel="distributedFormModel"
              :formItemConfig="distributedFormItemConfig"
              :formRules="formRules"
              label-width="120px"
              label-position="left"
            />
          </div>
        </div>
        <div class="content-box">
          <div class="box-heard">
            <CustomTitle title="隐患登记"></CustomTitle>
          </div>
          <div class="box-body" style="min-height: 317px">
            <custom-form
              ref="registrationForm"
              :formModel="registrationFormModel"
              :formItemConfig="registrationFormItemConfig"
              :formRules="formRules"
              label-width="120px"
              label-position="left"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitFrom" class="btn_primary"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addHazards, listContact, getProjectPointControlList } from "@/api";
import { mapState } from "vuex";
export default {
  name: "typesForm",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    descData: {
      type: Object,
      default: () => { },
    },
    deptId: {
      require: true
    },
  },
  data() {
    return {
      // 项目点下人员列表
      handleUserList: undefined,
      // 部门点列表
      projectPointSelect: undefined,
      // 隐患派发提交表单数据
      distributedFormModel: {
        hazardsName: undefined,
        projectPointId: undefined,
        handleUserId: undefined,
      },
      // 隐患登记提交表单数据
      registrationFormModel: {
        hazardsContent: undefined,
        hazardsPosition: undefined,
        hazardsPics: undefined,
      },
      // 隐患派发表单配置项
      distributedFormItemConfig: [
        {
          label: "隐患事项",
          prop: "hazardsName",
          span: 24,
          clearable: true,
        },
        {
          label: "所属项目点",
          prop: "projectPointId",
          component: "BaseSelect",
          span: 12,
          clearable: true,
          onChange: (val) => {
            this.getHandleUser()
          },
        },
        {
          label: "处理人员",
          prop: "handleUserId",
          component: "BaseSelect",
          span: 12,
          clearable: true,
        },
      ],
      // 隐患派发表单配置项
      registrationFormItemConfig: [
        {
          label: "隐患内容",
          prop: "hazardsContent",
          span: 24,
          clearable: true,
        },
        {
          label: "隐患位置",
          prop: "hazardsPosition",
          span: 24,
          clearable: true,
        },
        {
          label: "隐患图片",
          prop: "hazardsPics",
          span: 24,
          component: "BaseMultipleUpload",
          clearable: true,
          onChange: (fileList) => {
            this.getImagesArr(fileList)
          },
        },
      ],
      // 表单验证
      formRules: {
        deviceTypeKey: {
          required: true,
          message: "设备类型字符串",
          trigger: "blur",
        },
        deviceTypeName: {
          required: true,
          message: "类型名称不能为空",
          trigger: "blur",
        },
      },
      formModel: {},
    };
  },
  computed: {
    ...mapState("dialog", ["dialogTitles"]),
  },
  watch: {
  },
  created() {
    this.getProjectPointSelect()

  },
  mounted() {
  },
  methods: {
    // 获取图片地址数组
    getImagesArr(fileList) {
      this.registrationFormModel.hazardsPics = fileList;
    },
    // 新增-根据项目点获取处理人员
    async getHandleUser() {
      const listData = await listContact({ projectPointId: this.distributedFormModel.projectPointId })
      console.log(listData)
      let tempHandleUserList = listData.rows.map((item) => {
        return {
          label: item.userName,
          value: item.userId,
        };
      })
      this.handleUserList = tempHandleUserList
      console.log(tempHandleUserList)
      this.distributedFormItemConfig.forEach((item) => {
        if (item.prop == "handleUserId") {
          this.$set(item, "options", this.handleUserList)
        }
      });
    },
    // 获取部门列表
    async getProjectPointSelect() {
      let tempDeptIdList = await getProjectPointControlList()
      console.log(tempDeptIdList)
      this.projectPointSelect = tempDeptIdList.rows.map(function (item) {
        return {
          label: item.projectPointName,
          value: item.projectPointId,
        };
      }
      )
      this.distributedFormItemConfig.forEach((item) => {
        if (item.prop === "projectPointId") {
          item.options = this.projectPointSelect;
        }
      });

    },
    cancel() {
      this.$emit("cancel");
    },
    submitFrom() {
      // console.log(this.distributedFormModel);
      // console.log(this.registrationFormModel);
      //   this.$refs['form'].validate(valid => {
      //       if (valid) {
      //       }
      //   });
    let formObj = Object.assign({}, this.distributedFormModel, this.registrationFormModel)

      console.log(formObj)
      addHazards(formObj).then(res => {
        if (200 === res.code) {
          this.$message({
            message: '添加成功',
            type: 'success',
          });
          this.cancel();
          //   this.getList();
        }
      });
    },
  },
  components: {},
};
</script>

<style lang="less" scoped></style>
